<!DOCTYPE html>
<html>
    <head>
        <title>1</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
       <div id="root">
            <h1 :style="{opacity}">Vue生命周期</h1>
            <button @click="stop">停止定时器,并且取消数据绑定</button>
        </div>
        <script type="text/javascript">
            Vue.config.productionTip = false
            const vm = new Vue({
                el: '#root',
                data() {
                    return {
                        opacity: 1,
                        intervalBox:null
                    }
                },
                mounted() {
                    this.intervalBox = setInterval(() => {
                        vm.opacity -= 0.01
                        if (vm.opacity <= 0) {
                            vm.opacity = 1
                        }
                    }, 0.016);
                },
                methods:{
                    stop(){
                        this.$destroy()
                    }
                },
                beforeDestroy(){
                    clearInterval(this.intervalBox)
                    this.$destroy
                }
            })
           
        </script>
    </body>
</html>
